.clockFace{
	color:red;
	font-size:200%;
	border: solid blue 1px;
	text-align: center;
	margin: 10px auto;
	padding:10px;
	display: inline-block;
	float: center;
}

.addAlarmForm{
	padding:10px;
	width: 300px;
	border: solid blue 1px;
	display: inline-block;
	margin:10px;
	float: center;
}

.addAlarmFormResult{
	margin: 0px 0px auto auto;
	float: right;
	border: solid red 1px;
	text-wrap: suppress;
}

.addAlarmFormResultText{
	text-wrap: suppress;
}

.getAlarmForm{
	padding:10px;
	border: solid blue 1px;
	display: inline-block;
	margin:10px;
	float: left;
}

#getAlarmFormResult{
	width: 300px;
}

#getAlarmActionResult{
	height: 50px;
	width: 300px;
	float: right;
}

#modToggle{
	display: inline-block;
	padding: 10px;
	border: 1px solid black;
	border-radius: 0px 5px 5px 0px;
	width: 50px;
	margin: auto auto 10px -5px;
}

#addToggle{
	display: inline-block;
	padding: 10px;
	border: 1px solid black;
	border-radius: 5px 0px 0px 5px;
	width: 50px;
	margin: auto 0px 10px auto;
}

.toggleInactive{
	
	animation: toggleOffAnimation 1s;
	background:#F5F5F0;
	
}

.toggleActive{
	
	animation: toggleOnAnimation 1s;
	background:#ADD6FF;
	
}

@keyframes toggleOffAnimation{

	from{
		background: #ADD6FF;
	}
	
	to{
		background: #F5F5F0;
	}
	
}

@keyframes toggleOnAnimation{

	from{
		background: #F5F5F0;
	}
	
	to{
		background: #ADD6FF;
	}
	
}